﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @*导入layui*@
    <link href="~/Content/lib/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/lib/layui/layui.js"></script>
   
    <style>
        .layui-table-cell {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body style="padding:20px"> 
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" id="title" name="" autocomplete="off" class="layui-input">
            </div>
       
            <label class="layui-form-label">发布时间</label>
            
            <div class="layui-inline">
                <input type="text" name="data" id="begin" placeholder="开始日期" autocomplete="off" class="layui-input">
            </div>
            -
            <div class="layui-inline">
                <input type="text" name="data" id="end" placeholder="结束日期" autocomplete="off" class="layui-input">
            </div>
        </div>
            <div class="layui-inline">
                <button type="button" id="search" class="layui-btn">搜索</button>
                <button type="button" id="add" class="layui-btn">新增</button>
                

            </div>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>


        </div>

        <table id="demo" lay-filter="test"></table>

        <script>
            layui.use(['table', 'laydate'], function () {
                var table = layui.table;
                var $ = layui.$;
                var layer = layui.layer;

                var laydate = layui.laydate;

                //日期
                laydate.render({
                    elem: '#begin'
                });
                laydate.render({
                    elem: '#end'
                });

            //第一个实例
            table.render({
                elem: '#demo'
                , method: "post"
                , url: '/Back/Banner/Select' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    { field: 'id', title: 'ID'}
                    , { field: 'title', title: '标题' }
                    , { field: 'create_user', title: '创建人' }
                    , { field: 'create_time', title:'创建时间' }
                    , { field: 'bannerImg', title: '图片', templet:'<div><img src="/images/{{d.bannerImg}}"/></div>' }
                    , { field: 'url', title: '跳转地址' }
                    , { fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
                ]]
            });

            $("#search").click(function () {
                // 重新加载表格
                table.reload('demo', {
                    where: {
                        title: $("#title").val(),
                        begin: $("#begin").val(),
                        end: $("#end").val()
                    }
                });

            })

            $("#add").click(function () {
                layer.open({//原始核心方法
                    type: 2 //此处以iframe举例
                    , title: '添加'//标题
                    , area: ['800px', '600px']//宽高
                    , shade: 0.3//弹层外区域。默认是0.3透明度的黑色背景
                    , content: "/Back/Banner/Add"//路径
                });
            })
            $("#excel").click(function () {
                window.location.href = "/Back/Banner/ListToExcel?title=" + $("#title").val()
            })
            //工具条事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                console.log(data)
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            url: "/Back/Banner/Delect",
                            type: "post",
                            data: {
                                id: data.id
                            },
                            dataType: "json"

                        })
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if (layEvent === 'edit') { //编辑
                    layer.open({
                        type: 2,
                        content: "/Back/Banner/Edit?id=" + data.id,
                        area: ["800px", "600px"]
                    });
                }
            });

        });
        </script>
</body>
</html>
